import { Button, Toast } from 'antd-mobile'
import { useSearchParams } from 'react-router-dom'
import './add.less'

export default function AddShopPage() {
  const [searchParams] = useSearchParams()
  const platform = searchParams.get('platform') || 'kuaishou'
  
  const platformNames = {
    douyin: '抖音',
    kuaishou: '快手'
  }
  
  const platformName = platformNames[platform as keyof typeof platformNames] || '快手'
  
  const status = {
    upper: '暂无店铺',
    snap: '暂无店铺',
  }

  const handleCheckAuth = () => {
    Toast.show({ content: '授权正常' })
  }

  return (
    <div className="addshop-page">
      <div className="tips">提示: 如果{platformName}已经购买上货和下单软件，则直接进入第三步，检查店铺授权情况</div>

      <div className="card current-status">
        <div className="title">当前授权情况</div>
        <div className="row"><span>灵猴上货助手：</span><span className="danger">{status.upper}</span></div>
        <div className="row"><span>灵猴下单助手：</span><span className="danger">{status.snap}</span></div>
      </div>

      <div className="section">
        <div className="step-title">第一步：订购灵猴上货助手</div>
        <div className="desc">点击下方按钮，完成灵猴上货助手（{platformName}版）订购</div>
        <Button color='primary' className='primary-btn'>订购灵猴上货助手</Button>
      </div>

      <div className="section">
        <div className="step-title">第二步：订购灵猴下单助手</div>
        <div className="desc">点击下方按钮，完成灵猴下单助手（{platformName}版）订购</div>
        <Button color='primary' className='primary-btn'>订购灵猴下单助手</Button>
      </div>

      <div className="section">
        <div className="step-title">第三步：确认授权结果</div>
        <div className="desc">检查授权情况</div>
        <Button className='ghost-btn' onClick={handleCheckAuth}>检查授权情况</Button>
      </div>

      <div className="bottom-space" />
    </div>
  )
}
